<template>
  <view class="comment-container">
    <!-- 评论列表 -->
    <scroll-view class="comment-list" scroll-y="true">
      <template v-for="(comment, index) in rootComments">
        <view class="comment-item">
          <view class="comment-header">
            <text class="nickname">匿名用户</text>
            <text class="create-time">{{ comment.commentDate }}</text>
          </view>
          <view class="star-rating">
            <text class="star" v-for="n in 5" :key="n" :class="{ 'active': n <= comment.score }">★</text>
          </view>
          <view class="comment-content">
            <text>{{ comment.content }}</text>
          </view>

          <!-- 渲染评论图片 -->
          <img class="comment-image" v-if="comment.image" :src="comment.image" @click="previewImage(comment.image)">

          <template v-if="comment.children && comment.children.length > 0">
            <view class="sub-comment-list">
              <view class="sub-comment-item" v-for="(childComment, childIndex) in comment.children">
                <view class="comment-header">
                  <text class="nickname">匿名用户</text>
                  <text class="create-time">{{ childComment.commentDate }}</text>
                </view>
                <view class="comment-content">
                  <text>{{ childComment.content }}</text>
                </view>

<!-- 渲染评论图片 -->
<img class="comment-image" v-if="childComment.image" :src="childComment.image" @click="previewImage(childComment.image)">
              </view>
            </view>
          </template>

        </view>
      </template>
    </scroll-view>
    <!-- 评论框 -->
  </view>
</template>

<style scoped>
  .comment-container {
    width: 100%;
    background-color: #f5f5f5;
  }

  .comment-list {
    padding: 5px;
  }

  .comment-item {
    background-color: white;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
  }

  .comment-header {
    display: flex;
    align-items: center;
  }

  .nickname {
    font-size: 12px;
    color: #333;
    flex-grow: 1;
    font-weight: bold;
  }

  .create-time {
    font-size: 10px;
    color: #999;
  }

  .comment-content {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    margin-top: 6px;
  }

  .sub-comment-list {
    background-color: #f5f5f5;
    padding-left: 8px;
    margin-top: 6px;
    border-radius: 4px;
  }

  .sub-comment-item {
    background-color: white;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
  }

  .star-rating {
    display: flex;
    align-items: center;
    margin-left: auto;
    /* 在评论头部右侧显示星级 */
  }

  .star {
    font-size: 20px;
    color: #ccc;
    margin-right: 2px;
  }

  .star.active {
    color: #f5b718;
    /* 当前星级及之前的星星使用激活颜色 */
  }

  .comment-image {
    width: 100px;
    height: 100px;
  }
  
  /* 点击时添加手型光标 */
  .comment-image:hover {
    cursor: pointer;
  }
</style>
<script>
	export default {
		data() {
			return {
				userData: {
					orderId: '',
					token: '',
					openId:''
				},
				commentData: [],
				rootComments: [], // 根评论列表
			}
		},

		methods: {
			async getStorage() {
				const token = uni.getStorageSync('token')
				const openId=uni.getStorageSync('openId')
				this.userData.openId = openId
				this.userData.token = token
			},

			async getAwarddMessage() {
				try {
					const res = await this.$myRequest({
						url: '/user/getOrderComment',
						method: 'GET',
						header: {
							Authorization: this.userData.token,
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							orderId: this.userData.orderId,
						}


					})
					console.log('原始 API 响应数据:', res.data)

					this.commentData = [res.data.data] // 将响应数据包装成数组

					this.rootComments = this.commentData.filter(comment => comment.parentId === 0) // 找到所有根评论
					console.log('根评论:', this.rootComments)

					this.commentData.forEach(comment => {
						if (comment.parentId !== 0) { // 对于每个子评论，找到对应的父评论并将其添加到父评论的 children 数组中
							const parentComment = this.commentData.find(c => c.commentId === comment.parentId)
							if (parentComment) {
								if (!parentComment.children) {
									parentComment.children = []
								}
								parentComment.children.push(comment)
							}
						}
					})
				} catch (err) {
					console.error(err)
				}
			},
			previewImage(url) {
			    uni.previewImage({
			      urls: [url], // 需要预览的图片链接列表
			      current: url, // 当前需要预览的图片链接
			    })
			  },
		},

		async onLoad(e) {
			this.userData.orderId=e.orderId
			console.log(this.userData.orderId);
			await this.getStorage()
			await this.getAwarddMessage()
			await this.previewImage()
		}
	}
</script>